@url searchImage searchSearchImage;
@url clearImage searchClearImage;
@url clearTouchedImage searchClearTouchedImage;

@if mgwt.css pretty {
	@external mgwt-SearchBox, round, input, clear, clear-active;
	
}

.mgwt-SearchBox {
	height: 44px;
	padding-left: 5px;
	padding-right: 5px;
	position: relative;
}

@if mgwt.os iphone retina {
	.mgwt-SearchBox {
		background-size: 100% 44px;
		background-repeat: repeat;
		background-position: 0px 0px;
		
	}
	
	@if user.agent safari {
		.mgwt-SearchBox {
			background-image: literal('-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1f3f4), color-stop(3%, #e0e4e7), color-stop(50%, #c7cfd4), color-stop(51%, #bec7cd), color-stop(97%, #b4bec6), to(#8999a5) )');
		}
	}
	
	@if user.agent gecko1_8 {
		.mgwt-SearchBox {
			background-image: literal('-moz-linear-gradient(top, #f1f3f4, #e0e4e7 3%, #c7cfd4 50%, #bec7cd 51%, #b4bec6 97%, #8999a5)');
		}
	}
}

@if mgwt.os ipad desktop {
	.mgwt-SearchBox {
		background-color: #B0B4C0;
		background-size: 100% 44px;
		background-repeat: repeat;
		background-position: 0px 0px;
	}
	
	@if user.agent safari {
		.mgwt-SearchBox {
			background-image: literal('-webkit-gradient(linear,left bottom,left top,color-stop(0, #A8ACB9),color-stop(1, #eee))');
		}
	}
	
	@if user.agent gecko1_8 {
		.mgwt-SearchBox {
			background-image: literal('-moz-linear-gradient(bottom, #A8ACB9, #eee)');
		}
	}
}

@if mgwt.os android android_tablet {
	.mgwt-SearchBox {
		background-color: transparent;
		border-bottom: 2px solid rgb(82, 163, 196);
	}
}

@if mgwt.os blackberry {
	.mgwt-SearchBox {
		background-color: transparent;
		border-bottom: 2px solid rgb(0, 92, 176);
	}
}



.mgwt-SearchBox .round {
		background-clip: padding-box;
		background-image: searchImage;
		background-repeat: no-repeat;
		background-position: 10px 50%;
		
		width: 100%;
		height: 24px;
		
		display: block;
		position: relative;
		top: 10px;
		margin: 0px;
		padding: 0px;
}

@if mgwt.os iphone ipad desktop retina {
	.mgwt-SearchBox .round {
		border-bottom-left-radius: 16px 16px;
		border-bottom-right-radius: 16px 16px;
		border-top-left-radius: 16px 16px;
		border-top-right-radius: 16px 16px;
		background-color: white;
	}
}

@if mgwt.os android android_tablet {
	.mgwt-SearchBox .round {
		background-color: transparent;
		
	}
	
}


@if mgwt.os blackberry {
	.mgwt-SearchBox .round {
		background-color: transparent;
	}
}



.mgwt-SearchBox .input {
	border: 0;
	
	
	font-size: 13px;
	padding: 0;
	position: absolute;
	display:block;
	top: 0px;
	left: 25px;
	right: 60px;
	bottom: 0px;
	
}

@if mgwt.os android android_tablet {
	.mgwt-SearchBox .input {
		background-color: transparent;
		color: white;
	}
}

@if user.agent safari {
	.mgwt-SearchBox .input {
		\-webkit-appearance: none;
		\-webkit-user-select: text;
		\-webkit-tap-highlight-color: rgba(0,0,0,0);
	}
}

@if user.agent gecko1_8 {
	.mgwt-SearchBox .input {
		top: 5px;
		\-moz-appearance: none;
		\-moz-user-select: text;
		\-moz-tap-highlight-color: rgba(0,0,0,0);
	}
}



.mgwt-SearchBox .clear {
	position: absolute;
	top: -9px;
	right: 10px;
	width: 40px;
	height: 40px;
	font-size: 13px;
	padding: 0;
	background-image: clearImage;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.mgwt-SearchBox .clear-active {
	background-image: clearTouchedImage;
}